<template>
  <Card>
    <Button type="primary" @click="addTag">add tag</Button>
    <Table :data="tags" :columns="tagColumn" stripe border>
      <template slot-scope="{ row }" slot="create_time">
        {{ row.tag_create_time | formatTime("yyyy-MM-dd hh:mm:ss") }}
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" @click="editTag(row)">edit</Button>
        <Divider type="vertical"></Divider>
        <Poptip
          confirm
          title="do you confirm delete this tag"
          :transfer="true"
          @on-ok="removeTag(row.tag_id)"
          @on-cancel="$Message.info(`cancel delete tag< ${row.tag_name} >`)"
        >
          <Button type="error" size="small">delete</Button>
        </Poptip>
      </template>
    </Table>
    <Modal v-model="modalVisible" @on-ok="onOk">
      <template #header>
        {{ isEdit ? "edit tag" : "add tag" }}
      </template>
      <Form
        :model="tagForm"
        :rules="tagFormRule"
        :label-width="80"
        ref="tagFormRef"
      >
        <FormItem label="tagName" prop="tag_name">
          <Input
            v-model="tagForm.tag_name"
            placeholder="please enter tag_name"
          />
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "index",
  data() {
    return {
      tags: [],
      tagColumn: [
        {
          type: "index"
        },
        {
          title: "name",
          key: "tag_name"
        },
        {
          title: "create_time",
          slot: "create_time"
        },
        {
          title: "action",
          slot: "action"
        }
      ],
      tagForm: {
        tag_id: null,
        tag_name: ""
      },
      tagFormRule: {
        tag_name: [
          {
            required: true,
            message: "attribute tag_name is required",
            trigger: "blur"
          }
        ]
      },
      modalVisible: false,
      isEdit: false
    };
  },
  methods: {
    ...mapActions(["fetchAdminTags", "deleteTag", "saveTag", "updateTag"]),
    async getTagList() {
      const res = await this.fetchAdminTags();
      if (res.code === 2000) {
        this.$Message.success("fetch tag list successful");
        this.tags = res.data.content;
      } else {
        this.$Message.error("fetch tag list failed");
      }
    },
    async removeTag(id) {
      const res = await this.deleteTag(id);
      if (res.code === 2003) {
        this.$Message.success("delete tag successful");
        await this.getTagList();
      } else {
        this.$Message.error("delete tag failed");
      }
    },
    async onOk() {
      this.$refs.tagFormRef.validate(async isValid => {
        if (!isValid) {
          this.$Message.error("validate from failed");
        }
        let res;
        let code;
        let action;
        if (this.isEdit) {
          res = await this.updateTag({
            id: this.tagForm.tag_id,
            formData: this.tagForm
          });
          code = 2002;
          action = "update";
        } else {
          res = await this.saveTag(this.tagForm);
          code = 2001;
          action = "save";
        }
        if (res.code === code) {
          this.$Message.success(`${action} tag successful`);
          await this.getTagList();
          this.$refs.tagFormRef.resetFields();
        } else {
          this.$Message.success(`${action} tag successful`);
        }
      });
    },
    editTag(tag) {
      this.tagForm = Object.assign({}, tag);
      this.isEdit = true;
      this.modalVisible = true;
    },
    addTag() {
      this.tagForm = {
        tag_id: null,
        tag_name: ""
      };
      this.isEdit = false;
      this.modalVisible = true;
    }
  },
  created() {
    this.getTagList();
  }
};
</script>

<style scoped></style>
